<template>
  <div>
    <h1>查询到的航班信息:</h1>
    <template>
      <center>
        <el-table
          class="table"
          :show-header="status"
          :data="planeData"
          style="width: 100%;height:650px"
          @row-click="buy">
          <!--      图标-->
          <el-table-column
            width="250">
            <template slot-scope="scope">
              <div class="temp">
                <el-image class="image"
                          :src="require('@/assets/img.png')">
                </el-image>
                &nbsp;&nbsp;
                <div class="zong">
                  <span class="flightNumber">{{ scope.row.flightNumber }}</span>
                  <span class="name">{{ scope.row.startDateTime }}</span>
                  <span class="name">{{ scope.row.endDateTime }}</span>
                </div>
              </div>
            </template>

          </el-table-column>


          <el-table-column
            label="起飞时间"
            width="110"
          >
            <template slot-scope="scope">
              <div class="zong">
                <span class="time">{{ scope.row.flightStartTime }}</span>
                <span class="airport">{{ scope.row.startAirport }}</span>
              </div>
            </template>
          </el-table-column>


          <el-table-column
            width="100">
            <hr style="border: #99a8bb 2px solid;align-content: center">
          </el-table-column>

          <el-table-column
            label="抵达时间"
            width="200"
          >
            <template slot-scope="scope">
              <div class="zong">
                <span class="time">{{ scope.row.flightEndTime }}</span>
                <span class="airport">{{ scope.row.endAirport }}</span>
              </div>
            </template>
          </el-table-column>

          <!--      价格-->
          <el-table-column
            width="240">
            <template slot-scope="scope">
              <div class="temp">
              <span class="price">
              ￥{{ scope.row.price }}
            </span>
                &nbsp;&nbsp;<el-button class="button" @click="buy">购买</el-button>
              </div>
            </template>
          </el-table-column>


        </el-table>
        <!--        <hr>-->
      </center>
    </template>
  </div>
</template>

<script>

const sessionInfo = JSON.parse(localStorage.getItem('planeList'));
import order from "../api/order";

export default {
  name: 'PlaneList',
  data() {
    return {
      status: false,
      planeData: {
        name: '东方航空',
        startAirport: '大兴国际机场',
        endAirport: '遥墙SB国际机场',
        flightStartTime: '01:30',
        flightEndTime: '08:30',
        price: '888',
        flightNumber: 'G75086'
      },
      total: 10,
      type: ""
    }
  },
  created() {
    //拿到查询的值
    this.getPlanList()

  },
  methods: {

    getType() {
      if (this.total > 0) {
        this.type = "success"
      } else
        this.type = "warning"
    }
    ,
    getPlanList() {
      this.planeData = sessionInfo.data.data.rows
      this.total = this.planeData.length
      this.getType()
      this.$message({
        message: "您好,共查询到" + this.total + "条数据",
        type: this.type,
        duration: 1000
      });
    },


    /**
     * 这里有一个bug，用户只要点击这一行就被认为是点击了购买按钮
     * @param row
     */
    buy(row) {
      let planeId;
      let planeType;
      planeId = row.id;
      planeType = row.planeType
      order.createOrder(planeId, planeType)
        .then(response => {
          let orderNo = response.data.data.orderNo
          //将将单号保存到本地
          localStorage.setItem("orderNo", orderNo)
          //刷新跳转
          location.replace('/ToPay/' + orderNo)
          // this.$router.push('/ToPay/' + orderNo)
          // this.$router.go(0)
        })
    },


  }
}
</script>

<style scoped>
.table {
  background-color: #eaf7f1;
  padding-top: 10px;
}

/*航班号*/
.flightNumber {
  color: black;
  font-size: 20px;
  font-weight: bold;
}

/*航空公司名*/
.name {
  font-size: 20px;
  font-weight: bold;
}

/*时间*/
.time {
  color: black;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

/*机场*/
.airport {
  color: black;

}

/*flex横向布局*/
.temp {
  display: inline-flex;
  /*align-content:center;*/

}

/*航班号*/
.flightNumber {
  font-size: 20px;
  font-weight: bold;
}

/*flex纵向布局*/
.zong {
  display: inline-flex;
  flex-direction: column;
}

/*价格*/
.price {
  padding-top: 10px;
  color: #fc7d14;
  font-size: 20px;
  font-weight: bold;
}

.button {
  color: #ffffff;
  background-color: rgb(252, 153, 83);
  border-color: rgb(252, 153, 83);
}
</style>
